<template>
  <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="2">
          <el-button type="primary"
                     @click="showAddCateDialog">添加分类
          </el-button>
        </el-col>
      </el-row>
      <!--第三方插件表格-->
      <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false"
                  :expand-type="false" :show-index="true" index-text="#"
                  border :show-row-hover="true">
        <!--  <templatev-slot:isok="scope"> 也可以-->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false"
             style="color: lightgreen"/>
          <i class="el-icon-error" v-else style="color: red"/>
        </template>
        <template v-slot:order="scope">
          <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <template v-slot:opt="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editCate(scope.row.cat_id)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCateById(scope.row.cat_id)">删除
          </el-button>
        </template>
      </tree-table>
      <!--分页插件-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="pageSizes"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!--添加分类对话框-->
    <el-dialog
      title="添加分类"
      :visible.sync="addDialogVisible"
      width="30%"
      @close="addDialogClosed"
    >
      <el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="100px">
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
          <el-cascader
            v-model="selectedKeys"
            :options="parentCateList"
            :props="cascaderProps"
            @change="parentCateChange" clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
    <!--编辑分类对话框-->
    <el-dialog
      title="编辑分类"
      :visible.sync="editDialogVisible"
      width="30%"
      @close="editDialogClosed"
    >
      <el-form :model="editCateForm" :rules="editCateRules" ref="editCateRef" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCateInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Cate",
    data() {
      return {
        catelist: [],
        addDialogVisible: false,
        addCateForm: {
          cat_name: '',
          cat_level: 0,
          cat_pid: 0
        },
        addCateRules: {
          cat_name: [
            {required: true, message: '请输入分类名称', trigger: 'blur'},
            {
              min: 1,
              max: 20,
              message: '长度在 1 到 20 个字符',
              trigger: 'blur'
            }
          ],
        },
        queryInfo: {
          type: 3,
          pagenum: this.$store.state.page_num,
          pagesize: this.$store.state.page_size,
        },

        pageSizes: [5, 10, 20, 50],
        total: 0,
        columns: [
          {
            label: '分类名称',
            prop: 'cat_name',
            width: '400px',
          },
          {
            label: '是否有效',
            prop: 'cat_deleted',
            type: 'template',
            template: 'isok',
          },
          {
            label: '排序',
            prop: 'cat_level',
            type: 'template',
            template: 'order',
          },
          {
            label: '操作',
            type: 'template',
            template: 'opt',
          },
        ],
        parentCateList: [],
        cascaderProps: {
          checkStrictly: true,
          expandTrigger: 'hover',
          value: 'cat_id',
          label: 'cat_name',
          children: 'children'
        },
        selectedKeys: [],
        editDialogVisible: false,
        editCateForm: {},
        editCateRules: {
          cat_name: [
            {required: true, message: '请输入分类名称', trigger: 'blur'},
            {
              min: 1,
              max: 20,
              message: '长度在 1 到 20 个字符',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    created() {
      this.getCateList()
    },
    methods: {
      getCateList() {
        this.$store.dispatch('getCateList_', this.queryInfo).then(() => {
          this.catelist = this.$store.state.cate_list
          this.total = this.$store.state.cate_total
        })
      },
      //添加分类确定
      addCate() {
        this.$refs.addCateRef.validate(valid => {
          if (!valid) return
          this.$store.dispatch('addCate_', this.addCateForm).then(() => {
            if (this.$store.state.cate_state !== 201) {
              return this.$message.error("分类添加失败")
            }
            this.getCateList()
            return this.$message.success("分类添加成功")
          })
          this.addDialogVisible = false
        })
      },
      //添加分类对话框关闭
      addDialogClosed() {
        this.selectedKeys = []
        this.$refs.addCateRef.resetFields()
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      },
      //编辑分类对话框
      editDialogClosed() {
        this.$refs.editCateRef.resetFields()
      },
      //删除分类
      removeCateById(id) {
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('removeCateById_', id).then(() => {
            if (this.$store.state.cate_state !== 200) {
              return this.$message.error("删除失败")
            }
            this.getCateList()
            this.$message({type: 'success', message: '删除成功!'});
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'});
        })
      },
      //监听pagesize改变
      handleSizeChange(newPageSize) {
        this.queryInfo.pagesize = newPageSize
        this.getCateList()
      },
      handleCurrentChange(newPageNum) {
        this.queryInfo.pagenum = newPageNum
        this.getCateList()
      },
      showAddCateDialog() {
        this.getParentCateList()
        this.addDialogVisible = true
      },
      //获取父级分类列表
      getParentCateList() {
        this.$store.dispatch('getParentCateList_', {type: 2}).then(() => {
          if (this.$store.state.parent_cate_state !== 200) {
            return this.$message.error("获取分级分类列表失败")
          }
          this.parentCateList = this.$store.state.parent_cate_list
        })
      },
      //父级分类选中改变
      parentCateChange() {
        console.log(this.selectedKeys)
        if (this.selectedKeys.length > 0) {
          this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
          this.addCateForm.cat_level = this.selectedKeys.length
        } else {
          this.addCateForm.cat_pid = 0
          this.addCateForm.cat_level = 0
        }
      },
      // 编辑分类
      editCate(id) {
        this.$store.dispatch('getCateById_', id).then(() => {
          if (this.$store.state.cate_state !== 200) {
            return this.$message.error("查询分类信息失败")
          }
          this.editCateForm = this.$store.state.cate
        })
        this.editDialogVisible = true
      },
      //更新分类信息
      updateCateInfo() {
        this.$refs.editCateRef.validate(valid => {
          if (!valid) return
          this.$store.dispatch('updateCateInfo_',
            {
              id: this.editCateForm.cat_id,
              cat_name: {cat_name: this.editCateForm.cat_name}
            }).then(() => {
            if (this.$store.state.cate_state !== 200) {
              return this.$message.error("修改分类信息失败")
            }
            this.getCateList()
            return this.$message.success("修改成功")
          })
          this.editDialogVisible = false
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .treeTable {
    margin-top: 15px;
  }

  .el-cascader {
    width: 100%;
  }
</style>
